<!-- 考级报名 -->
<template>
	<view class="container">
<!-- 		<view class="c-header" v-if="status!='student'">
			<view class="header" @click="onGameStudenList">
				<text>查看我的学生>></text>
			</view>
			<view class="header-placeholder">
				
			</view>
		</view> -->
		<view class="c-form">
			<u-form :model="testSingUpInfo" :rules="rules" ref="form">
				<view class=""  v-if="studentInfo">
					<view class="form-headline">
						<text>报名级别</text>
						<text :style="{'color':'red'}">*</text>
						<u-line></u-line>
					</view>
					<view class="form-select">
						<u-form-item prop="grade_id" labelWidth="0">
							<view class="" style="background-color: #fff;">
								<uni-data-select :value="major_id" emptyText="暂无分组" :localdata="majorList"
									placeholder="选择考级专业" clear="false" @change="majorListChange">
								</uni-data-select>
							</view>
						</u-form-item>
						<u-form-item prop="grade_id" labelWidth="0">
							<view class="" style="background-color: #fff;">
								<uni-data-select v-if="selectShow" v-model="testSingUpInfo.grade_id" emptyText="暂无分组" :localdata="groupList"
									placeholder="选择考级等级" @change="groupChange">
								</uni-data-select>
							</view>
						</u-form-item>
					</view>
				</view>
				<view class="form-headline">
					<text>报名信息</text>
					<text :style="{'color':'red'}">*</text>
					<u-line></u-line>
				</view>
				<view class="form-search" v-if="status=='teacher' || status=='org'">
					<u-form-item>
						<!-- <view class="search-info">
							<u-input placeholder="输入学生身份证号" :custom-style="{'background-color':'#fff'}" v-model="searchs"></u-input>
							<view class="search-info-btn">
								<u-button @click="searchStudentInfo">查询</u-button>
							</view>
						</view> -->
					</u-form-item>
					<view class="search-hint" v-if="!studentInfo">
						<view class="">
							<text @click="onGameStudenList">查看我的学生列表 ></text>
						</view>
						<view>
							<text @click="toAddStudentInfo">立即添加学生信息 ></text>
						</view>
					</view>
				</view>
				<view class="form-info" v-if="studentInfo">
					<view class="">
						<StudentModule :info="studentInfo"></StudentModule>
					</view>
					<view class="m-btn">
						<view class="btn-block" v-if="status=='student'">
							<u-button type="primary" text="修改" @click="toStudentEditInfo" shape="circle"></u-button>
						</view>
						<view class="btn-block">
							<u-button type="success" text="报名" @click="toGameCheckSignUp" shape="circle"></u-button>
						</view>
					</view>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import StudentModule from "@/pages/pages_test/module/StudentModule.vue"
	export default {
		name: "",
		components: {
			StudentModule
		},
		data() {
			return {
				// 分组id
				group_id:null,
				// 校验规则
				rules: {
					'grade_id': {
						type:"number",
						required: true,
						message: '请选择考级级别',
						trigger: ['blur','change'],
					}
				},
				// 选择器状态
				selectShow:false,
				// 查询证件号
				searchs:null,
				// 报考专业
				majorList:[],
				major_id:'', // 专业id
				// 参赛组别
				groupList: [],
				// 报名信息
				testSingUpInfo:{
					test_name:null,
					grade_id:null,
					grade_name:null,
					amount:null,
				},
				// 学生信息
				studentInfo: null,
				// 用户身份
				status: this.$store.state.status
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		onLoad(query){
			this.group_id = query.id
			
		},
		onShow() {
			if (this.status == 'student') {
				this.getStudentInfo()
			}
		},
		methods: {
			onGameStudenList(){
				this.navigateTo('testStudentList')
				uni.$once('search',(res)=>{
					this.searchs = res.sn
					this.searchStudentInfo()
				})
			},
			// 跳转添加学生信息
			toAddStudentInfo(){
				this.navigateTo("/pages/pages_mine/public/mineStudentInfo?type=add")
			},
			// 查询学生信息
			searchStudentInfo(){
				this.studentInfo = null
				this.$http.searchStudentInfo({document_nums:this.searchs}).then(res=>{
					this.studentInfo = res
					// this.getGroup()
					this.getEaxmMajorList()
				}).catch(err=>{
					uni.$u.toast(err.msg)
				})
			},
			// 跳转修改信息
			toStudentInfo() {
				this.navigateTo("/pages/pages_mine/student/studentInfo?type=update")
			},
			// 选择组别
			groupChange(e){
				if(e){
					this.$refs.form.validateField('grade_id')
				}
				for(let item of this.groupList){
					if(item.value==e){
						this.testSingUpInfo.grade_name = item.text
						this.testSingUpInfo.amount = item.amount
						continue
					}
				}
			},
			// 选择专业
			majorListChange(e){
				this.major_id = e
				this.getGroup()
			},
			// 获取报名专业
			getEaxmMajorList(){
				this.$http.getEaxmMajorList({relation_id:this.group_id}).then(res=>{
					this.majorList = res.data.map(item=>{
						return {value:item.id,text:item.name}
					})
					this.selectShow = true
				})
			},
			// 获取报名组别
			getGroup() {
				this.$http.getTestLevelList({major_id:this.major_id,cate_id:this.group_id,student_id:this.studentInfo.id}).then(res => {
					this.testSingUpInfo.test_name = res.exam_cate_name
					this.groupList = res.data.map(item => {
						return {
							text: item.title,
							value: item.id,
							amount:item.amount,
							disable:item.is_apply==0?true:false
						}
					})
				})
			},
			// 获取学生信息
			getStudentInfo() {
				this.$http.getStudentInfo().then(res => {
					this.studentInfo = res
					// this.getGroup()
					// 获取报考专业
					this.getEaxmMajorList()
					this.filePath = [{
						url: res.document_img
					}]
				})
			},
			// 跳转核对报名信息页面
			toGameCheckSignUp() {
				this.$refs.form.validate().then(res => {
					this.testSingUpInfo.exam_grade_cate_name = this.testSingUpInfo.test_name
					this.testSingUpInfo.exam_grade_title = this.testSingUpInfo.grade_name
					uni.setStorageSync("testSignUpInfo",this.testSingUpInfo)
					this.navigateTo("/pages/pages_test/testCheckSignUp?sn="+this.searchs)
				}).catch(errors => {
					uni.$u.toast('请检查未填字段')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-header{
			width: 100%;
			.header{
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				padding: 0 20rpx;
				box-sizing: border-box;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				border-top: 1rpx solid #ddd;
			}
			.header-placeholder{
				width: 100%;
				height: 80rpx;
			}
		}
		.c-form {
			.form-headline {
				width: 100%;
				overflow: hidden;
				margin-top: 35rpx;
				display: flex;
				align-items: center;

				&>text {
					flex-shrink: 0;
					margin-right: 15rpx;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			.form-search{
				.search-info{
					display: flex;
					.search-info-btn{
						width: 120rpx;
						margin:0 20rpx;
					}
					
				}
			.search-hint {
				padding-top: 20rpx;
				font-size: 28rpx;
				text-align: center;
				display: flex;
				justify-content: space-around;
				&>view{
					&>text{
						border-bottom: 1rpx solid #333;
					}
				}
				
			}
			}
			.form-info {
				.form_cer_image {
					width: 150rpx;
					height: 200rpx;
				}

				.form-info_btn {
					display: flex;

				}
			}
		}
	}
</style>
